<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="ichart.1.2.1.src.js"></script>
	<script>
		//定义数据
		var data = [
			{name : 'H',value : 7,color:'#a5c2d5'},
		   	{name : 'E',value : 7,color:'#cbab4f'},
		   	{name : 'L',value : 12,color:'#76a871'},
		   	{name : 'L',value : 12,color:'#76a871'},
		   	{name : 'O',value : 15,color:'#a56f8f'},
		   	{name : 'W',value : 13,color:'#c12c44'},
		   	{name : 'O',value : 15,color:'#a56f8f'},
		   	{name : 'R',value : 18,color:'#9f7961'},
		   	{name : 'L',value : 12,color:'#76a871'},
		   	{name : 'D',value : 4,color:'#6f83a5'}
		];
		var data1 = [
        	{name : 'IE',value : 35.75,color:'#a5c2d5'},
        	{name : 'Chrome',value : 29.84,color:'#cbab4f'},
        	{name : 'Firefox',value : 24.88,color:'#76a871'},
        	{name : 'Safari',value : 6.77,color:'#9f7961'},
        	{name : 'Opera',value : 2.02,color:'#a56f8f'},
        	{name : 'Other',value : 0.73,color:'#6f83a5'}
    	];

		 $(function(){	



			var chart = new iChart.Column2D({
				render : 'canvasDiv',//渲染的Dom目标,canvasDiv为Dom的ID
				data: data,//绑定数据
				title : 'Hello World\'s Height In Alphabet',//设置标题
				width : 800,//设置宽度，默认单位为px
				height : 400,//设置高度，默认单位为px
				shadow:false,
				//激活阴影
				shadow_color:'#c7c7c7',
				//设置阴影颜色
				coordinate:{//配置自定义坐标轴
					scale:[{//配置自定义值轴
						 position:'left',//配置左值轴	
						 start_scale:0,//设置开始刻度为0
						 end_scale:26,//设置结束刻度为26
						 scale_space:2,//设置刻度间距
						 listeners:{//配置事件
							parseText:function(t,x,y){//设置解析值轴文本
								return {text:t+"万"+" cm"}
							}


						}
					}]
				}
			});
			//调用绘图方法开始绘图
			chart.draw();
			// 两种不同的写法。心碎了
			new iChart.Bar2D({
				render : 'canvasDiv1',
				data: data1,
				title : 'Top 5 Browsers from 1 to 29 Feb 2012',
				showpercent:true,//百分比
				decimalsnum:2,//小数位数
				width : 800,
				height : 400,
				coordinate:{
					scale:[{
						 position:'bottom',	
						 start_scale:0,
						 end_scale:40,
						 scale_space:8,
						 listeners:{
							parseText:function(t,x,y){
								return {text:t+"%"}
							}
						}
					}]
				}
			}).draw();
		});



	</script>
	
</head>
<body>
	<div id='canvasDiv'></div>
	<div id='canvasDiv1'></div>
</body>
</html>